import React, { Component } from "react";

export default class App extends Component {
  // 子组件的引用
  ageInput = React.createRef(); //React中的ref必须提前创建好
  state = {
    uname: "",
    age: 18,
  };
  doUnameChange = (e) => {
    let uname = e.target.value;
    // 此处可以对uname执行各种检查和转换
    this.setState({ uname });
  };
  doSubmit = () => {
    console.log("开始向服务器提交数据", this.state.uname, this.state.age);
    console.log("开始向服务器提交数据", this.ageInput.current.value);
  };
  render() {
    return (
      <div>
        <h2>受控组件</h2>
        <input
          value={this.state.uname}
          onChange={this.doUnameChange}
          placeholder="请输入用户名"
        />
        <div>当前输入的内容:{this.state.uname}</div>

        <hr />
        <h2>非受控组件</h2>
        <input
          ref={this.ageInput}
          defaultValue={this.state.age}
          placeholder="请输入您的年龄"
        />
        <div>当前输入的内容:{this.state.age}</div>

        <hr />
        <button onClick={this.doSubmit}>提交用户填写的数据</button>
      </div>
    );
  }
}
